<script setup lang="ts">
import type { BlockState } from '~/types'
import { isDev } from '~/composables'

const { block } = defineProps<{
  block: BlockState
}>()
const numberColors = [
  'text-transparent',
  'text-blue-500',
  'text-green-500',
  'text-yellow-500',
  'text-orange-500',
  'text-purple-500',
  'text-pink-500',
  'text-indigo-500',
  'text-pink-500',
]
function getBlockClass(block: BlockState) {
  if (!block.revealed || block.flagged)
    return 'bg-gray-500/10'
  return block.mine
    ? 'bg-red-500/50'
    : numberColors[block.adjacentMines]
}
</script>

<template>
  <!-- v-for="block, x in row"
    :key="x" -->
  <button
    border="0.5 gray-400/10"
    :class="getBlockClass(block)"
    flex="~"
    m="1px" min-h-8 min-w-8
    items-center
    justify-center
    vertical-top
    hover:bg-gray
  >
    <template v-if="block.flagged">
      <div i-mdi:flag text-red-500 />
    </template>
    <template v-else-if="block.revealed || isDev">
      <div v-if="block.mine" i-mdi:mine />
      <div v-else font-600>
        {{ block.mine ? "x" : block.adjacentMines }}
      </div>
    </template>
  </button>
</template>
